<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>slot作用域插槽</title>
  <script src="https://cdn.jsdelivr.net/npm/vue"></script>
</head>

<body>
<!--从子组件拿到数据显示到父组件
父组件替换插槽的标签，但是内容由子组件来提供
-->
<div id="app">
<!--  //父组件-->
<!--  2.5以下版本要写template，以上版本可以写div-->
  <com2></com2>
 <com2>
   <template slot-scope="slot">
     <span v-for="item in slot.data">{{item}}---</span>
     <p>{{slot.data.join('--')}}</p>
   </template>
 </com2>

</div>


<template id="tmpl">//子组件
  <div>
    <slot :data="language">
      <ul>
        <li v-for="item in language">{{item}}</li>
      </ul>
    </slot>
  </div>
</template>

<script>

  var com2 = {
    template: '#tmpl', // 通过指定了一个 Id, 表示 说，要去加载 这个指定Id的 template 元素中的内容，当作 组件的HTML结构
    data() {
      return {
        language:['java','javascript','php','chinese']
      }
    },
    methods:{}
  }


  // 创建 Vue 实例，得到 ViewModel
  var vm = new Vue({
    el: '#app',
    data: {
    },
    methods: {},
    components: {
      com2
      // com2: com2
    }
  });
</script>
</body>

</html>